<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="my-form" action="#" method="get" target="_self">

    <!--输入控件常用属性-->
    <fieldset>








        <legend>输入控件的常用属性测试</legend>
        <label>默认的值: <input name="ipt01" value="11"/></label><br/>
        <!--disabled禁用关键词-->
        <label>禁用属性: <input name="ipt02" value="22" disabled/></label><br/>
        <!--readonly只读关键词-->
        <label>只读属性: <input name="ipt03" value="33" readonly/></label><br/>
        <!--required必填关键词-->
        <label>必填属性: <input name="ipt04" value="44" required/></label><br/>
        <!--autofocus自动焦点关键词-->
        <label>自动焦点: <input name="ipt05" value="55" autofocus/></label><br/>
        <!--placeholder背景提示关键词-->
        <label>背景提示: <input name="ipt06" placeholder="请在此处输入账号..."/></label><br/>
        <!--pattern正则验证关键词-->
        <label>正则验证: <input name="ipt07" value="aa" pattern="^[A-Za-z]+$" required/></label><br/>
        <!--autocomplete自动提示关键词-->
        <label>自动提示: <input name="ipt08" autocomplete="on"/></label><br/>
        <!--maxlength最大长度关键词-->
        <label>最大长度: <input name="ipt09" maxlength="5"/></label><br/>
    </fieldset>

    <!--输入控件常用类型-->
    <fieldset>
        <legend>输入控件的常用类型测试</legend>
        <label>单文控件: <input type="text" name="username"/></label><br/>
        <label>密码控件: <input type="password" name="password"/></label><br/>
        <span>单选控件: </span>
        <label><input type="radio" name="gender" value="1" checked/>男</label>
        <label><input type="radio" name="gender" value="0"/>女</label><br/>
        <span>多选控件: </span>
        <label><input type="checkbox" name="hobby" value="smoking" checked/>抽烟</label>
        <label><input type="checkbox" name="hobby" value="drinking" checked/>喝酒</label>
        <label><input type="checkbox" name="hobby" value="fire-hair"/>烫头</label><br/>
        <label>隐藏控件: <input type="hidden" name="id" value="9527"/></label><br/>
        <label>文件控件: <input type="file" name="file"/></label><br/>
        <label>数字控件: <input type="number" name="age" min="18" max="100" step="1"/></label><br/>
        <span>日期控件: </span>
        <label><input name="birth" type="date"/></label><br/>
        <label><input name="birth" type="time"/></label><br/>
        <label><input name="birth" type="datetime-local"/></label><br/>
        <label><input name="birth" type="week"/></label><br/>
        <label><input name="birth" type="month"/></label><br/>
    </fieldset>

    <!--下拉菜单控件-->
    <fieldset>
        <legend>下拉菜单</legend>
        <label>
            <select name="food" required>
                <optgroup label="粮食类">
                    <option value="rice">大米</option>
                    <option value="millet">小米</option>
                    <option value="corn">玉米</option>
                </optgroup>
                <optgroup label="水果类">
                    <option value="apple" selected>苹果</option>
                    <option value="banana">香蕉</option>
                    <option value="pear">鸭梨</option>
                </optgroup>
                <optgroup label="其他类">
                    <option value="other" disabled>我被禁用了</option>
                </optgroup>
            </select>
        </label><br/>
    </fieldset>

    <!--多行文本控件-->
    <fieldset>
        <legend>多行文本控件</legend>
        <label>
            <textarea name="info" cols="50" rows="10" maxlength="100"
                      placeholder="请在此填写自我介绍..."></textarea>
        </label>
    </fieldset>
</form>
</body>
</html>